import React, { Component } from 'react';
import { Col, Row } from 'antd';

import './ConfigNum.less';

export default class ConfigNum extends Component {
    constructor(props) {
        super(props);
        this.state = {
            num: 1,
            data: this.props.data
        };
    }

    handleNumChange = (e, val) => {
        let currentNum = this.state.num;
        switch (val) {
            case "up":
                currentNum++;
                break;
            case "down":
                currentNum--;
                break;
            default:
                break;
        }

        if (currentNum < 1) {
            currentNum = 1;
        }
        else if (currentNum > this.state.data.maxval) {
            currentNum = this.state.data.maxval;
        }

        this.setState({
            num: currentNum
        });

        this.props.selectCallback(this.props.model, "number", currentNum);
    };

    render() {
        return (
            <div className="number-body">
                <Row className="row-body">
                    <Col className="child-title" span={24}>
                        <p>{this.state.data.title}</p>
                    </Col>
                    <Col className="child-content" span={24}>
                        <div className="numberSelect">
                            <p className="p-number">{this.state.num}</p>
                            <div>
                                <p onClick={(event) => { this.handleNumChange(event, "up") }}>&#9650;</p>
                                <p onClick={(event) => { this.handleNumChange(event, "down") }}>&#9660;</p>
                            </div>
                        </div>
                        <p className="p-desc"> 台 <strong>您最多可以创建</strong><strong>{this.state.data.maxval}</strong><strong>台主机</strong></p>
                    </Col>
                </Row>
            </div>
        );
    }
}